{% extends "master.html" %}

{% block subTitle %}{{map.title|escape}}{% endblock %}

{% block script %}
var txtUsername;
var txtComment;

function Loaded()
{
	txtUsername = document.getElementById("username")
	if (txtUsername)
		G02.AddEventFn(txtUsername, "keydown", KeyDownUsername);

	txtComment = document.getElementById("comment");
	txtComment.focus();
	G02.AddEventFn(txtComment, "keydown", KeyDownComment);
}

function DeleteComment(delkey)
{
	if (!confirm("Are you sure you want to delete this comment?"))
		return;
	
	var sd = new G02.ScriptData('/comment/delete');
	var objCall = {delkey:delkey, userauth:"{{userauth}}"};
	sd.Call(objCall, function(obj) {
		switch (obj.status)
			{
		case 'OK':
			// Refresh the page to reset the display for the new header
			window.location.href = window.location.href;
			break;
		default:
			alert(G02.sSiteName + ": " + obj.message);
			break;
			}
		});
}

function Click()
{
	// Call the Click function in our parent window in case we're in a Frame
	if (window.parent && window.parent != window && window.parent.Click)
		window.parent.Click();
}

function PostComment()
{
	sUsername = "";
	if (txtUsername)
		sUsername = txtUsername.value;
	var sd = new G02.ScriptData('/comment/');
	var objCall = {id:"{{map.GetId}}", userauth:"{{userauth}}", username:sUsername, comment:txtComment.value};
	sd.Call(objCall, PCCallback);
		
	function PCCallback(obj)
		{
		switch (obj.status)
			{
		case 'OK':
			// Refresh the page to reset the display for the new header
			window.location.href = window.location.href;
			break;
		case 'Fail/Used':
			if (confirm(obj.message + "  Are you sure you want to use it?"))
				{
				objCall.force = true;
				sd.Call(objCall, PCCallback);
				}
			break;
		default:
			alert(G02.sSiteName + ": " + obj.message);
			break;
			}
		};
}

function KeyDownUsername(evt)
{
	if (evt.keyCode == 13)
		{
		txtComment.focus();
		evt.preventDefault();
		}
}	

function KeyDownComment(evt)
{
	if (evt.keyCode == 13)
		{
		PostComment();
		evt.preventDefault();
		}
}

window.onclick = Click;
{% endblock %}

{% block body %}

<div style="clear:both;"></div>

<div id="info-status">
	<p class="stats-header">
		<a style="float:right;padding-top:2px;padding-right:2px;" target="_top" href="{{map.Href}}" title="Close Frame"><img class="x" src="/images/x.png"/></a>
		Stats
	</p>
	<p>Created: {{map.Age}}</p>
	{% if map.Creator %}
	<p>By: <a href="/user/{{map.Creator}}" target="_top">{{map.Creator}}</a></p>
	{% endif %}
	<p>Shared: {{map.shareCount}}</p>
	<p>Viewed: {{map.viewCount}}</p>
	<p>Comments: {{map.CommentCount}}</p>
	<p>Tags: 
	{% for tag in TopTags %}
		<a target="_top" href="/tag/{{tag}}" title="Recently popular | {{tag}}">{{tag|escape}}</a>{% if not forloop.last %}, {% endif %}
	{% endfor %}
	</p>
</div> <!-- info-status -->

<div id="info-body">
<a target="_top" href="/" title="{{site_name}} Home | Popular Pages"><img class="logo-small" src="/images/logo-small.png"></a>
<h1><a target="_top" href="{{map.Href}}" title="{{map.url|escape}}">{{map.title|escape}}</a></h1>
<p class="url">{{map.url|escape}}</p>

<div id="info-form">
	{% if username %}
	<div style="float:left;width:70px;height:22px;margin-top:4px;">
	{% else %}
	<div style="float:left;width:220px;">
	{% endif %}
		{% if not username %}
		<label for="username">Nickname: </label>
		<input maxlength="20" style="width:70px;" type="text" id="username" name="username" tabindex="1"/>
		{% endif %}
		<label for="comment">Comment: </label>
	</div>

	<input onclick="PostComment();" style="float:right;width:70px;" type="button" value="Post" tabindex="3"/>

	{% if username %}
	<div style="margin-left:70px;margin-right:80px;">
	{% else %}
	<div style="margin-left:230px;margin-right:80px;">
	{% endif %}
		<input style="width:97%;" type="text" id="comment" name="comment" tabindex="2"/>
	</div>

	<p style="clear:left;" class="help">Comment format: "nickname: text of your comment [tag1, tag2, ...]"</p>
</div>

<div class="comments">
{% for comment in map.Comments %}
	{% spaceless %}<p>
    {% if comment.username %}<a target="_top" href="/user/{{comment.username}}" title="{{comment.username}}'s activity">{{comment.username}}</a>:{% endif %}
    {{comment.comment|escape|urlize}}
    {% if comment.tags %}
    	[{% for tag in comment.TagList %}<a target="_top" href="/tag/{{tag}}" title="{{tag}} pages">{{tag}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}]
    {% endif %}
    - {{ comment.Age }}
    {% if comment.AllowDelete %}
    <img class="x" onclick="DeleteComment('{{comment.DelKey}}');" src="/images/x.png"/>
    {% endif %}
    </p>{% endspaceless %}
{% endfor %}
</div>

</div> <!-- info-body -->

{% endblock %}

{% block footer %}{%endblock %}
